<template>
  <div id="nav">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <div class="demo-type" @click="toMYself(myInformation.userId)">
          <el-avatar :src="myInformation.headImag" />
        </div>
      </el-form-item>
      <el-form-item>
        <div class="inputbox">
          <el-input
            v-model="inputValue"
            class="w-50 m-2"
            @keyup.enter="searchContent"
            size="large"
            style="border-radius: 6px; width: 700px"
            placeholder="Please Input"
            :prefix-icon="Search"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-icon :size="27" @click="addDongtai" style="cursor: pointer">
          <Edit />
        </el-icon>
      </el-form-item>
    </el-form>
    <router-link to="/firstIntroduce">推荐</router-link>
    <router-link to="/hotlist">&nbsp;&nbsp;&nbsp;&nbsp;热搜</router-link>
  </div>
  <router-view />
</template>
<script setup>
import { Edit, Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import router from '@/router'
import axios from 'axios'
onMounted(() => {
  indexInfo()
})
const inputValue = ref('')
function toMYself(userId) {
  router.push('myMessage?userId=' + userId)
}

function addDongtai() {
  router.push('Release')
}
function searchContent() {
  router.push('detailSearch?inputValue=' + inputValue.value)
}

const myInformation = ref({})
function indexInfo() {
  axios({
    url: 'http://localhost:8080/user/selfInfo',
    method: 'get',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    }
  }).then(function (res) {
    myInformation.value = res.data.data
    localStorage.setItem('userSelfId', res.data.data.userId)
  })
}
</script>

<style lang="scss">
.demo-type {
  display: flex;
}
.demo-type > div {
  flex: 1;
  text-align: center;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
.inputbox {
  width: 600px;
  border-radius: 20px;
  display: flex;
}
#nav {
  padding: 20px;
  width: 70%;
  margin: auto;
  background-color: whitesmoke;

  a {
    font-weight: bold;
    color: #2c3e50;
    font-family: '宋体';
    font-size: 20px;
    text-decoration: none;
    margin-top: 30px;
    &.router-link-exact-active {
      color: blueviolet;
    }
  }
}
</style>
